<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Orders Management System</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>

<body>

<div class="container my-2 border">
  <h1 class="text-center">Orders Management System</h1>

    <nav>
        <form style="float: right;" th:action="@{/find}" method="get">
            <input id="status" type="text" name="status" placeholder="Search...">
            <button type="submit" class="btn-dark">Search</button>
        </form>
    </nav>

    <!--  th:href 链接地址-->
    <a th:href = "@{/showNewOrdersForm}" class="btn btn-dark btn-sm mb-3"> Add Orders </a>

    <table border="1" class = "table table-condensed table-dark table-hover text-info table-bordered table-hover text-center">
      <thead>
          <tr>
              <th>
                  <a th:href="@{'/page/' + ${currentPage} + '?sortField=orderID&sortDir=' + ${reverseSortDir}}">
                      orderID</a>
              </th>
              <th>
                  <a th:href="@{'/page/' + ${currentPage} + '?sortField=time&sortDir=' + ${reverseSortDir}}">
                      time</a>
              </th>
              <th>
                  <a th:href="@{'/page/' + ${currentPage} + '?sortField=consignee&sortDir=' + ${reverseSortDir}}">
                      consignee</a>
              </th>
              <th>
                  <a th:href="@{'/page/' + ${currentPage} + '?sortField=addr&sortDir=' + ${reverseSortDir}}">
                      addr</a>
              </th>
              <th>
                  <a th:href="@{'/page/' + ${currentPage} + '?sortField=status&sortDir=' + ${reverseSortDir}}">
                      status</a>
              </th>
              <th>Actions</th>
          </tr>
      </thead>

    <tbody>
    <!--    th:each 元素遍历-->
    <tr th:each="orders : ${listOrders}">
      <!--th:text 用于指定标签显示的内容-->
      <td th:text="${orders.orderID}"></td>
      <td th:text="${orders.time}"></td>
      <td th:text="${orders.consignee}"></td>
      <td th:text="${orders.addr}"></td>
      <td th:text="${orders.status}"></td>

      <!--定位到controller层下-->
        <td>
            <a th:href="@{/showFormForUpdate/{id}(id=${orders.id})}" class="btn btn-primary ">更新</a>
            <a th:href="@{/deleteOrders/{id}(id=${orders.id})}" class="btn btn-danger">删除</a>
        </td>
    </tr>
    </tbody>
  </table>

    <!--   th:if 条件判断，如果为真-->
    <div th:if = "${totalPages > 1}">

        <div class = "row col-sm-10">
            <!--显示一共有几行数据-->
            <div class = "col-sm-3">
                Total Rows: [[${totalItems}]]
            </div>

            <!--显示页数-->
            <div class = "col-sm-5">
        <span th:each="i: ${#numbers.sequence(1, totalPages)}">
            <a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>
            <span th:unless="${currentPage != i}">[[${i}]]</span>  &nbsp; &nbsp;
        </span>
            </div>

            <!--切换到下一页-->
            <div class = "col-sm-1">
                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Next</a>
                <span th:unless="${currentPage < totalPages}">Next</span>
            </div>

            <!--切换到最后一页-->
            <div class="col-sm-1">
                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Last</a>
                <span th:unless="${currentPage < totalPages}">Last</span>
            </div>

        </div>
    </div>


</div>

</body>
</html>





